<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" >
<head>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css"  th:href="@{/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css" th:href="@{/easyui/themes/icon.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/color.css" th:href="@{/easyui/themes/color.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/easyui/demo/demo.css" th:href="@{/easyui/demo/demo.css}"/>
    <script type="text/javascript" src="../static/easyui/jquery.min.js" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js" th:src="@{/easyui/jquery.easyui.min.js}"></script>

<script type="text/javascript">

    <!--easyuiStyle2 增删改查方式 2 -->
    $(function () {
        $("#easyuiStyle2").datagrid({
            url:'findMyAgentJson',
            rownumbers:true,
            fitColumns:true,
            pagination:true,
            pageSize:5,
            pageList:[5,10,15],
            pageNumber:1,
            toolbar:'#toolbar2',
            columns:[[
                {
                    field:'id',
                    title:'自动编号',
                    width:100,
                    checkbox:true
                },
                {
                    field:'portrait',
                    title:'头像',
                    width:100,
                },
                {
                    field:'name',
                    title:'姓名',
                    width:100,
                },
                {
                    field:'phone',
                    title:'电话',
                    width:100,
                },
                {
                    field:'webchat',
                    title:'微信',
                    width:100,
                },
                {
                    field:'company',
                    title:'公司',
                    width:100,
                },
                {
                    field:'address',
                    title:'地址',
                    width:100,
                },
                {
                    field:'description',
                    title:'简介',
                    width:100,
                },
                {
                    field:'userId',
                    title:'上级',
                    width:100,
                }
            ]]
        })
    })
/*
   $(function () {
       var newId;
       var itemId;
/!*增删改查方法*!/
        manager_tool= {
            addProduct: function () {
                $("#addProductDialog").dialog("open");
            },
            /!*单个删除方法，批量删除待做*!/
            delProduct: function () {
                var rows = $('#easyuiStyle2').datagrid('getSelections');
                if (rows.length > 0) {
                    $.messager.confirm('确定操作', '您确定要删除所选记录吗？', function (flag) {
                        if (flag) {
                            var ids = [];
                            console.log(ids.join(','));
                            $.ajax({
                                url: 'delMyAgent',
                                type: 'post',
                                data: {
                                    id: rows[0].id,
                                },
                                success: function (data) {
                                    $.messager.show({
                                        title: '提示',
                                        msg: '删除成功'
                                    });
                                    $("#easyuiStyle2").datagrid("reload");
                                }
                            })
                        }
                    });
                }
                else {
                    $.messager.alert('提示', '请选择需要删除的记录', 'info');
                }
            },

            /!*修改方法*!/
            update:function () {
                var rows = $('#easyuiStyle2').datagrid('getSelected');
                if (rows){
                    $("#updateProduct").form('load',rows);
                    $('#enditTab').dialog('open');
                    itemId=rows.id;
                } else {
                    alert('只能选择一条数据进行修改！')
                }

            },
        }

        $('#enditTab').dialog({
            width:400,
            closed:true,
            title:'修改管理',
            buttons:[{
                text:'保存',
                iconCls:'icon-add-new',
                handler:function () {
                    //修改提交方法
                    var myAgent={}
                    myAgent["id"] = itemId,
                    myAgent['name'] = $('input[id="update_name"]').val(),
                    myAgent['phone'] = $('input[id="update_phone"]').val(),
                    myAgent['webchat'] = $('input[id="update_webchat"]').val(),
                    myAgent['address'] = $('input[id="update_address"]').val(),
                    myAgent['description'] = $('input[id="update_description"]').val()
                    $.ajax({
                        url: 'updateMyAgent',
                        type: 'post',
                        contentType:"application/json",
                        data: JSON.stringify(myAgent),
                        success: function (data, response, status) {
                            $.messager.progress('close');
                            $.messager.show({
                                title: '提示',
                                msg: '修改成功',
                            }),
                            $('#enditTab').dialog("close").form('reset'),
                            $("#easyuiStyle2").datagrid("reload");
                        }
                    })
                } },
                {
                    text:'取消',
                    iconCls:'icon-redo',
                    handler:function(){
                        $("#enditTab").dialog("close").form("reset") //取消修改弹窗方法
                    },
                }]
        })


           /!*新增的弹窗方法内容*!/
           $("#addProductDialog").dialog({
              width:400,
               closed:true,
               title:'新增管理',
               buttons:[{
                   text:'提交',
                   iconCls:'icon-add-new',
                   handler:function () {
                    //新增提交方法
                       var myAgent={};
                       myAgent['name']=$('input[name="name"]').val(),
                       myAgent['phone']=$('input[name="phone"]').val(),
                       myAgent['webchat']=$('input[name="webchat"]').val(),
                       myAgent['address']=$('input[name="address"]').val(),
                       myAgent['description']=$('input[name="description"]').val()
                       $.ajax({
                           url:'saveMyAgent',
                           type:'post',
                           data:{
                               name:$('input[name="name"]').val(),
                               phone:$('input[name="phone"]').val(),
                               webchat:$('input[name="webchat"]').val(),
                                address:$('input[name="address"]').val(),
                                description:$('input[name="description"]').val()
                           },
                           success:function (data,response,status) {
                               $.messager.progress('close');
                               $.messager.show({
                                   title: '提示',
                                   msg: '新增管理成功',
                               }),
                               $('#addProductDialog').dialog("close").form('reset'),
                               $("#easyuiStyle2").datagrid("reload");
                           }
                       })

                   } },
                   {
                       text:'取消',
                        iconCls:'icon-redo',
                        handler:function(){
                            $("#addProductDialog").dialog("close").form("reset") //取消弹窗方法
                         },
                   }]
           });
       })*/
   </script>



</head>
<body>
    <!--datagrid html布局内容-->
    <table id="easyuiStyle2"></table>
    <div id="toolbar2"><!--工具栏按钮布局内容-->
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="manager_tool.addProduct()">新增</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-update" onclick="manager_tool.update()">修改</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="manager_tool.delProduct()">删除</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-undo" onclick="manager._cancel()">取消</a>
    </div>
<!--
&lt;!&ndash;新增弹窗html布局&ndash;&gt;
    <div id="addProductDialog" class="easyui-dialog" style="width: 500px;height: 400px;" closed="true">
        <form method="post">
            <input type="hidden" name="id"/>
            <table align="center">
                <tr>
                    <td>名字:</td>
                    <td><input required="true" type='text' name='name'></input></td>
                </tr>
                <tr>
                    <td>电话:</td>
                    <td><input required="true" type='text' name='phone'></input></td>
                </tr>
                <tr>
                    <td>微信:</td>
                    <td><input required="true" type='text' name='webchat'></input></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td><input required="true" type='text' name='address'></input></td>
                </tr>
                <tr>
                    <td>简介:</td>
                    <td><input required="true" type='text' name='description'></input></td>
                </tr>
            </table>
        </form>
    </div>

    &lt;!&ndash;修改弹窗html布局&ndash;&gt;
    <div id="enditTab" class="easyui-dialog" style="width: 500px;height: 400px;" closed="true" >
    <form method="post" id="updateProduct">
            <input type="hidden" name="id"/>
            <table align="center">
                <tr>
                    <td>名字:</td>
                    <td><input required="true" type='text' name='name' id="update_name"></input></td>
                </tr>
                <tr>
                    <td>电话：</td>
                    <td><input required="true" type='text' name='phone' id="update_phone"></input></td>
                </tr>
                <tr>
                    <td>微信:</td>
                    <td><input required="true" type='text' name='webchat' id="update_webchat"></input></td>
                </tr>
                <tr>
                    <td>地址:</td>
                    <td><input required="true" type='text' name='address' id="update_address"></input></td>
                </tr>
                <tr>
                    <td>简介:</td>
                    <td><input required="true" type='text' name='description' id="update_description"></input></td>
                </tr>

                <tr>
                    <td><a href="#" class="easyui-linkbutton" iconCls="" onclick="manager_tool.editSave()">保存</a></td>
                    <td><a href="#" class="easyui-linkbutton"  iconCls="" onclick="javascript:('#enditTab').dialog('close')">取消</a></td>
                </tr>
            </table>
        </form>
    </div>-->

</body>
</html>